<template>
  <div class="min-h-screen flex flex-col">
    <div class="relative h-96 overflow-hidden">
      <img 
        :src="city.image" 
        alt="城市图片" 
        class="w-full h-full object-cover"
      >
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
      <div class="absolute bottom-0 left-0 right-0 p-8 md:p-12">
        <div class="container mx-auto">
          <div class="flex flex-col md:flex-row md:items-end justify-between">
            <div>
              <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white mb-2">{{ city.name }}</h1>
              <div class="flex items-center text-white mb-4">
                <span class="mr-2 flex items-center">
                  <i class="fa fa-map-marker mr-1"></i> {{ city.country }}
                </span>
                <span class="flex items-center">
                  <i class="fa fa-star text-yellow-400 mr-1"></i> {{ city.rating }}
                </span>
              </div>
            </div>
            <button
              @click="toggleFavorite(city.id)"
              class="bg-white hover:bg-gray-100 text-primary px-4 py-2 rounded-lg shadow-md flex items-center transition-colors"
            >
              <i class="fa fa-heart mr-2" :class="{ 'text-red-500': isFavorite }"></i>
              <span>{{ isFavorite ? '已收藏' : '收藏' }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <main class="flex-grow container mx-auto px-4 py-12">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
        <div class="lg:col-span-2">
          <!-- 城市介绍 -->
          <section class="mb-12">
            <h2 class="text-2xl font-bold mb-4">城市介绍</h2>
            <p class="text-gray-700 leading-relaxed mb-6">{{ city.description }}</p>
            
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
              <div class="bg-gray-50 p-4 rounded-lg">
                <p class="text-sm text-gray-500 mb-1">人口</p>
                <p class="font-medium">{{ city.population }}</p>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg">
                <p class="text-sm text-gray-500 mb-1">语言</p>
                <p class="font-medium">{{ city.language }}</p>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg">
                <p class="text-sm text-gray-500 mb-1">货币</p>
                <p class="font-medium">{{ city.currency }}</p>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg">
                <p class="text-sm text-gray-500 mb-1">评分</p>
                <p class="font-medium flex items-center">
                  <i class="fa fa-star text-yellow-400 mr-1"></i> {{ city.rating }}
                </p>
              </div>
            </div>
          </section>
          
          <!-- 景点 -->
          <section class="mb-12">
            <h2 class="text-2xl font-bold mb-6">热门景点</h2>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <AttractionCard 
                v-for="attraction in city.attractions" 
                :key="attraction.id" 
                :attraction="attraction"
              />
            </div>
          </section>
          
          <!-- 用户评价 -->
          <section>
            <h2 class="text-2xl font-bold mb-6">用户评价</h2>
            
            <div class="space-y-6">
              <TestimonialCard 
                v-for="testimonial in city.testimonials" 
                :key="testimonial.id" 
                :testimonial="testimonial" 
                :city="city"
              />
            </div>
          </section>
        </div>
        
        <div class="lg:col-span-1">
          <!-- 推荐行程 -->
          <div class="bg-gray-50 rounded-xl p-6 mb-8">
            <h3 class="text-xl font-bold mb-4">推荐行程</h3>
            
            <div class="space-y-4">
              <div class="flex items-start">
                <div class="flex-shrink-0 bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">
                  1
                </div>
                <div>
                  <h4 class="font-medium">第一天：城市探索</h4>
                  <p class="text-sm text-gray-600">参观主要地标，体验当地文化</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="flex-shrink-0 bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">
                  2
                </div>
                <div>
                  <h4 class="font-medium">第二天：自然风光</h4>
                  <p class="text-sm text-gray-600">游览周边自然景观，享受户外活动</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="flex-shrink-0 bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">
                  3
                </div>
                <div>
                  <h4 class="font-medium">第三天：美食体验</h4>
                  <p class="text-sm text-gray-600">品尝当地特色美食，参观市场</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 旅游小贴士 -->
          <div class="bg-gradient-to-br from-primary/10 to-secondary/10 rounded-xl p-6">
            <h3 class="text-xl font-bold mb-4">旅游小贴士</h3>
            
            <ul class="space-y-3">
              <li class="flex items-start">
                <i class="fa fa-info-circle text-primary mt-1 mr-3"></i>
                <span>最佳旅游季节：{{ bestSeason }}</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-info-circle text-primary mt-1 mr-3"></i>
                <span>当地电压：220V</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-info-circle text-primary mt-1 mr-3"></i>
                <span>紧急电话：{{ emergencyPhone }}</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-info-circle text-primary mt-1 mr-3"></i>
                <span>建议停留时间：3-5天</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const store = useStore();
    const route = useRoute();
    
    // 获取当前城市ID
    const cityId = parseInt(route.params.id);
    
    // 获取城市数据
    const city = computed(() => store.getters.cityById(cityId));
    
    // 检查是否已收藏
    const isFavorite = computed(() => store.getters.isCityFavorite(cityId));
    
    // 切换收藏状态
    const toggleFavorite = (id) => {
      if (isFavorite.value) {
        store.dispatch('removeFromFavorites', id);
      } else {
        store.dispatch('addToFavorites', id);
      }
    };
    
    // 计算最佳旅游季节（根据城市名称简单模拟）
    const bestSeason = computed(() => {
      switch(city.value.name) {
        case '巴黎': return '春季和秋季';
        case '东京': return '春季和秋季';
        case '纽约': return '春季和秋季';
        case '罗马': return '春季和秋季';
        case '悉尼': return '9月至11月，3月至5月';
        case '北京': return '春季和秋季';
        default: return '春季和秋季';
      }
    });
    
    // 计算紧急电话（根据国家名称简单模拟）
    const emergencyPhone = computed(() => {
      switch(city.value.country) {
        case '法国': return '112';
        case '日本': return '110, 119';
        case '美国': return '911';
        case '意大利': return '112, 113';
        case '澳大利亚': return '000';
        case '中国': return '110, 120, 119';
        default: return '112';
      }
    });
    
    return {
      city,
      isFavorite,
      toggleFavorite,
      bestSeason,
      emergencyPhone
    };
  }
};
</script>

<style scoped>
.attraction-card {
  transition: all 0.3s ease;
}

.attraction-card:hover {
  transform: translateY(-5px);
}
</style>
